<at-panel>
    <at-panel-heading
        title="{{:: vm.strings.get('list.PANEL_TITLE') }}"
        hide-dismiss="true"
        badge="{{ instanceGroupCount }}">
    </at-panel-heading>

    <at-panel-body>
        <div class="at-List-toolbar">
            <smart-search
                class="at-List-search"
                django-model="instance_groups"
                base-path="instance_groups"
                iterator="instance_group"
                list="list"
                dataset="instance_group_dataset"
                collection="collection"
                search-tags="searchTags">
            </smart-search>
            <div class="at-List-toolbarAction">
                <button
                    aria-label="{{:: vm.strings.get('list.ADD') }}"
                    type="button"
                    class="at-Button--add"
                    id="button-add"
                    ng-show="vm.isSuperuser"
                    data-toggle="dropdown"
                    data-placement="top"
                    aria-haspopup="true"
                    aria-expanded="false"
                >
                </button>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="button-add">
                    <a class="dropdown-item" ui-sref="instanceGroups.add">
                        {{:: vm.strings.get('state.ADD_BREADCRUMB_LABEL') }}
                    </a>
                    <a class="dropdown-item" ui-sref="instanceGroups.addContainerGroup">
                        {{:: vm.strings.get('state.ADD_CONTAINER_GROUP_BREADCRUMB_LABEL') }}
                    </a>
                </div>
            </div>
        </div>
        </div>
        <at-list-toolbar
            ng-if="instance_groups.length > 0"
            sort-only="true"
            sort-value="vm.toolbarSortValue"
            sort-options="vm.toolbarSortOptions"
            on-sort="vm.onToolbarSort">
        </at-list-toolbar>
        <at-list results="instance_groups">
            <at-row ng-repeat="instance_group in instance_groups"
                ng-class="{'at-Row--active': (instance_group.id === vm.activeId)}"
                class="at-Row--instanceGroups">
                <div class="at-Row-itemGroup">
                    <div class="at-Row-items at-Row-items--instanceGroups">
                        <div class="at-Row-itemHeaderGroup">
                            <at-row-item
                                ng-if="!instance_group.credential"
                                header-value="{{ instance_group.name }}"
                                header-state="instanceGroups.edit({instance_group_id:{{instance_group.id}}})"
                                header-tag="{{ instance_group.is_isolated ? vm.strings.get('list.ROW_ITEM_LABEL_ISOLATED') : '' }}"
                            >
                            </at-row-item>
                            <at-row-item
                                ng-if="instance_group.credential"
                                header-value="{{ instance_group.name }}"
                                header-state="instanceGroups.editContainerGroup({instance_group_id:{{instance_group.id}}})"
                                header-tag="{{ instance_group.is_isolated ? vm.strings.get('list.ROW_ITEM_LABEL_ISOLATED') : '' }}"
                            >
                            </at-row-item>
                            <div class="at-RowItem--labels" ng-if="instance_group.credential">
                                <div class="LabelList-tagContainer">
                                    <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && template.summary_fields.user_capabilities.edit)}">
                                        <span class="LabelList-name">{{vm.strings.get('container.BADGE_TEXT') }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="at-RowItem--labels" ng-if="!instance_group.credential">
                                <div class="LabelList-tagContainer">
                                    <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && template.summary_fields.user_capabilities.edit)}">
                                        <span class="LabelList-name">{{vm.strings.get('instance.BADGE_TEXT') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="at-Row-nonHeaderItems">
                            <at-row-item
                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"
                                label-state="instanceGroups.jobs({instance_group_id: {{ instance_group.id }}, job_search: {status__in: ['running,waiting']}})"
                                value="{{ instance_group.jobs_running }}"
                                inline="true"
                                badge="true">
                            </at-row-item>
                            <at-row-item
                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_TOTAL_JOBS') }}"
                                label-state="instanceGroups.jobs({instance_group_id: {{ instance_group.id }}})"
                                value="{{ instance_group.jobs_total }}"
                                inline="true"
                                badge="true">
                            </at-row-item>
                            <at-row-item
                                ng-if="!instance_group.credential"
                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INSTANCES') }}"
                                label-state="instanceGroups.instances({instance_group_id: {{ instance_group.id }}})"
                                value="{{ instance_group.instances }}"
                                inline="true"
                                badge="true">
                            </at-row-item>
                            <div
                                ng-if="instance_group.credential"
                                class="at-Row--instanceSpacer">
                            </div>
                        </div>
                    </div>
                    <div class="at-Row-items--capacity" ng-if="!instance_group.credential">
                        <capacity-bar
                            label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED_CAPACITY') }}"
                            capacity="instance_group.consumed_capacity"
                            total-capacity="instance_group.capacity">
                        </capacity-bar>
                    </div>
                    <div
                        ng-if="instance_group.credential"
                        class="at-Row--capacitySpacer">
                    </div>
                </div>
                <div class="at-Row-actions" >
                    <at-row-action
                        icon="fa-trash"
                        ng-click="vm.deleteInstanceGroup(instance_group)"
                        ng-if="vm.rowAction.trash(instance_group)">
                    </at-row-action>
                </div>
            </at-row>
        </at-list>
    </at-panel-body>
    <paginate
        base-path="instance_groups"
        iterator="instance_group"
        dataset="instance_group_dataset"
        collection="instance_groups"
        query-set="instance_group_queryset">
    </paginate>
</at-panel>

